<template>
  <div>
    <footer
      v-if="!hideReplyBox && !showCreateConversation"
      class="shadow-sm bg-white mb-1 z-50 relative rounded-lg">
      <div>
        <chat-input-wrap />
      </div>
    </footer>
    <div v-else>
      <input class="message" type="text" v-model="message" />
      <button
        class="font-medium text-white py-3 px-4 rounded shadow-sm w-full"
        style="background-color: rgb(0, 156, 224); color: rgb(255, 255, 255);"
        @click="buildConversation"
      >
        开始会话
      </button>
    </div>
  </div>
</template>

<script>
import ChatInputWrap from './ChatInputWrap.vue'
import { mapActions, mapGetters } from 'vuex'
// import { de } from 'date-fns/locale'
export default {
  name: 'ChatBodyType',
  components: {
    ChatInputWrap
  },
  computed: {
    ...mapGetters({
      conversationAttributes: 'conversationAttributes/getConversationParams',
      messageCount: 'conversation/getMessageCount'
    }),
    hideReplyBox () {
      const { allowMessagesAfterResolved } = window.chatwootWebChannel
      const { status } = this.conversationAttributes
      return !allowMessagesAfterResolved && status === 'resolved'
    },
    showCreateConversation () {
      return !this.messageCount
    }
  },
  data () {
    return {
      message: '',
      color: '#009CE0'// '#6e6f73'
    }
  },
  methods: {
    ...mapActions('conversation', [
      'sendMessage',
      'sendAttachment',
      'clearConversations'
    ]),
    ...mapActions('conversationAttributes', [
      'getAttributes',
      'clearConversationAttributes'
    ]),
    buildConversation () {
      this.$store.dispatch('conversation/createConversation', {
        fullName: '',
        emailAddress: '',
        message: this.message,
        phoneNumber: '',
        customAttributes: {}
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.chat-message--input{
  box-shadow: 0 0 0 1px #1f93ff, 0 0 2px 3px #c7e3ff;
  align-items: center;
  display: flex;
  padding: 0 .5rem 0 .75rem;
  border-radius: 7px;
}
.bg-white {
    --bg-opacity: 1;
    background-color: #fff;
    background-color: rgba(255,255,255,var(--bg-opacity));
}
.form-input, textarea.form-input.large, textarea.form-input.small {
    height: auto;
}
textarea.form-input {
    font-family: Inter,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Tahoma,Arial,sans-serif;
}
.form-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff;
    border: 1px solid #e0e6ed;
    border-radius: .1875px;
    box-sizing: border-box;
    color: #3c4858;
    display: block;
    font-family: Inter,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Tahoma,Arial,sans-serif;
    font-size: 1rem;
    height: 2.5rem;
    line-height: 1.5;
    max-width: 100%;
    outline: none;
    padding: .25rem;
    position: relative;
    transition: background .2s,border .2s,box-shadow .2s,color .2s;
    width: 100%;
}
.text-black-900 {
    --text-opacity: 1;
    color: #1b1c1f;
    color: rgba(27,28,31,var(--text-opacity));
}
textarea {
    overflow: auto;
}
.button-wrap{
    display: flex;
    align-items: center;
    padding-left: .5rem;
}
.icon-button {
    min-height: 2rem;
    min-width: 2rem;
}
.ml-1 {
    margin-left: .25rem;
}
.justify-center {
    justify-content: center;
}
.items-center {
    align-items: center;
}
.flex {
    display: flex;
}
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
}
.relative {
    position: relative;
}
.rounded-lg {
    border-radius: .5rem;
}
.mb-1 {
    margin-bottom: .25rem;
}
.z-50 {
    z-index: 50;
}
.bg-white {
    --bg-opacity: 1;
    background-color: #fff;
    background-color: rgba(255,255,255,var(--bg-opacity));
}
.mt-50{
  margin-top: 50;
}
.w-full {
    width: 100%;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.rounded {
    border-radius: 0.25rem;
}
button {
    background-color: transparent;
    background-image: none;
}
*, :after, :before {
    box-sizing: border-box;
    border: 0 solid;
}
.message{
  border: 1px #42b983 solid;
  margin-bottom: 5px;
  width: 100%;
}
</style>
